<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>SIRAP Postman</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
input.required 
{
 border: solid 1px #f00;
}
</style>
<script>
	var methods = ["POST", "GET", "PUT", "DELETE"];
	$(document).ready(function(){

	initOptions();

	$("#xiu").find(":text").keyup(textChange);

	function removeRow(row){
         $(row).parent().parent().remove();         
         return false;
    }

    function initOptions() {
		var selObj = $("#mySelect");
    	for(index in methods) {
    		var item = methods[index];
			selObj.append("<option value='" + item + "'>" + item + "</option>");
    	}
	}

    $("#origin").click(function(){
         return removeRow(this);
    });

	$("#addParam").click(function(){
         $("<tr></tr>").append("<td style='width:60px'></td>")
                       .append("<td style='width:120px'><input type='text' style='width:100%' class='form-control' placeholder='key'></td>")
                       .append("<td style='width:800px'><input type='text' style='width:100%' class='form-control' placeholder='value'></td>")
                       .append("<td style='width:100px'><button class='form-control'>Remove</button></td>")
                       .appendTo("#xiu tbody")
                       .find("button").click(function(){
                               return removeRow(this)
                           });
                       $("#xiu").find(":text").keyup(textChange);
     });

     function getURL() {
		var myUrl = $.trim($("#url").val());
		return myUrl;
     }

     function collectParams() {
     	var params = "";
     	var count = 0;
     	$("#xiu").find("tr").each(function(){
     		var temp = $(this).find("input[placeholder='key']").val();
			var key = $.trim(temp);
			if(key.length == 0) {
				console.log("key 0000");
				return true;
			}

     		temp = $(this).find("input[placeholder='value']").val();
			var value = $.trim(temp);
			if(value.length == 0) {
				console.log("value 0000");
			}
			
			if(count != 0) {
				params += "&"
			}

			params += key + "=" + value;
			count++;
     	});

     	return params;
     }

     function textChange() {
     	var currentUrl = getURL();
     	console.log("currentUrl: " + currentUrl)
     	var ask = currentUrl.indexOf("?");
     	var path = currentUrl;
     	if(ask != -1) {
			path = currentUrl.substring(0, ask);
     	}
     	var nextUrl = path;
     	var params = collectParams();
     	if(params.length != 0) {
			nextUrl += "?" + params;
     	}

		$("#url").val(nextUrl);
     }

     $("#submit").click(function() {
     	var url = getURL();
		if(url.length == 0) {
			$("#url")[0].focus()
			return false;
		}
	
		getJSON(url);
     });
     

     function getJSON(url) {
     	//http://www.runoob.com/try/demo_source/demo_ajax_json.js
     	$.ajax({
        
        type: "post",
	       url: "http://www.runoob.com/try/demo_source/demo_ajax_json.js",
          dataType: 'jsonp',
          jsonpCallback:'callback',
         success: function(result) {
         	console.log("good stuff");
              alert(result);
         },
         error: function(XMLHttpRequest, textStatus, errorThrown) {
             alert(XMLHttpRequest.status);
             alert(XMLHttpRequest.readyState);
             alert(textStatus);
         }
     	});
     }

	});

</script>
</head>
<body>
<br>
<br>
<br>
<div style="margin:20px,width:800px">
<table id="head" border="0">
	<thead>
		<tr>
			<th style="width:60px"></th>
			<th style="width:120px">			
			<select id="mySelect" style="width:100%" class="form-control"></select>
			</th>
			<th style="width:800px">
<input type="text" style="width:100%" class="form-control" id="url" value="http://www.runoob.com/try/demo_source/demo_ajax_json.js?id=1&callback=?"
				   placeholder="sit down and tell me what you want.">
			</th>
			<th style="width:100px">
<button id="addParam" class="form-control">Params</button>
			</th>
			<th style="width:100px">
<button id="submit" class="form-control">Send</button>
			</th>
		</tr>
	</thead>
</table>
<br>
<table id="xiu" border="0">
	<tbody>
		<tr>
			<td style="width:60px"></td>
			<td style="width:120px"><input value="name" type="text" style="width:100%" class="form-control" placeholder="key"></td>
			<td style="width:800px"><input value="caroline" type="text" style="width:100%" class="form-control" placeholder="value"></td>
			<td style="width:100px"><button id="origin" class="form-control">Remove</button></td>
		</tr>
	</tbody>
</table>
</div>
</body>
</html>